<template>
  <el-card shadow="never" class="ticket-table">
    <el-table :data="tickets" style="width: 100%" border @selection-change="$emit('selection-change', $event)">
      <el-table-column type="selection" width="50" />
      <el-table-column prop="id" label="工单号" width="120" />
      <el-table-column prop="title" label="标题" min-width="180" />
      <el-table-column prop="customer" label="客户" width="100" />
      <el-table-column prop="priority" label="优先级" width="80">
        <template #default="{ row }">
          <el-tag :type="priorityType(row.priority)" disable-transitions>{{ priorityLabel(row.priority) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="100">
        <template #default="{ row }">
          <el-tag :type="statusType(row.status)" disable-transitions>{{ statusLabel(row.status) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="assignee" label="分配客服" width="100" />
      <el-table-column prop="createdAt" label="创建时间" width="160" />
      <el-table-column label="操作" width="180" fixed="right">
        <template #default="{ row }">
          <el-button size="small" type="primary" @click="$emit('view', row)">查看</el-button>
          <el-tooltip v-if="row.status === 'closed' || row.status === 'resolved'" content="已关闭/已完成工单不可编辑" placement="top">
            <el-button size="small" :disabled="true">编辑</el-button>
          </el-tooltip>
          <el-button v-else size="small" @click="$emit('edit', row)">编辑</el-button>
          <el-tooltip v-if="row.status === 'closed' || row.status === 'resolved'" content="已关闭/已完成工单不可删除" placement="top">
            <el-button size="small" type="danger" :disabled="true">删除</el-button>
          </el-tooltip>
          <el-button v-else size="small" type="danger" @click="$emit('delete', row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup lang="ts">
const props = defineProps({
  tickets: { type: Array, required: true }
})
function priorityLabel(val: string) {
  switch (val) {
    case 'urgent': return '紧急'
    case 'high': return '高'
    case 'medium': return '中'
    case 'low': return '低'
    default: return val
  }
}
function priorityType(val: string) {
  switch (val) {
    case 'urgent': return 'danger'
    case 'high': return 'warning'
    case 'medium': return 'primary'
    case 'low': return 'success'
    default: return ''
  }
}
function statusLabel(val: string) {
  switch (val) {
    case 'open': return '待处理'
    case 'processing': return '处理中'
    case 'waiting': return '等待回复'
    case 'resolved': return '已完成'
    case 'closed': return '已关闭'
    default: return val
  }
}
function statusType(val: string) {
  switch (val) {
    case 'open': return 'danger'
    case 'processing': return 'warning'
    case 'waiting': return 'primary'
    case 'resolved': return 'success'
    case 'closed': return 'info'
    default: return ''
  }
}
</script>

<style scoped>
.ticket-table {
  border-radius: 12px;
}
</style> 